import React, { Component } from 'react'
import AnimalCss from './animal.module.scss'
import {AnimalInterface} from '../../types/home.d'
import {RouteComponentProps,withRouter} from 'react-router-dom'

//withRouter 把路由相关的信息放到当前组件的props上

interface Iprops extends RouteComponentProps{ //1.继承路由接口  history match ..类型
    item:AnimalInterface
}

class Animal extends Component<Iprops>{
    render() {
        //pet_breed 1.狗  2.猫  3.其他
        //pet_gender 1 女孩 2 男孩
        let {pet_name,pet_age,pet_species,pet_gender,pet_immunity,id} = this.props.item;
        return (
            <dl className={AnimalCss.animal} onClick={()=>{this.goDetail(id)}}>
                <dt>
                    <img src="" alt=""/>
                </dt>
                <dd>
                    <div>
                        <h4>我叫{pet_name}</h4>
                        <span>{pet_gender===1?'女孩':'男孩'}</span>
                    </div>
                    88<div>
                        <span>{pet_age}</span>
                        <span>{pet_species}</span>
                    </div>
                    <div>
                        <span>{pet_immunity===1?'已免疫':''}</span>
                    </div>
                    <div>
                        北京  xxx 
                    </div>
                </dd>
            </dl>
        )
    }
    goDetail = (id:number) => {
        this.props.history.push(`/detail/${id}`)
    }
}

export default withRouter(Animal)

/**
 * 跳路由两种形式：
 * 
 * 1.编程时跳：this.props.history.push()
 * 
 * 2.声明式跳：Navlink
 * 
 * 组件不是路由直接调的，需要把路由相关信息拿到当前组件的props上
 * 
 * 1.从父级以属性的形式传递过来
 * 
 * 2.withRouter高阶组件
 * */ 
